<script>
export default {
  name: "vote",
  data() {
    return {
      keyword: '',
      listShow: [],
      list: [

      ],
      userInfo: null,
      loginPopup: false,
      form: {
        nickname: '',
        phone: '',
      },
    }
  },
  onShow() {
    this.getList()
    this.userInfo = uni.getStorageSync('userInfo')
    if (this.userInfo) {
      uni.showLoading({
        title: '加载中',
        mask: true,
        duration: 10000
      })
      this.$api.getUserInfo({
        id: this.userInfo.id
      }).then(res2 => {
        this.userInfo = res2
      }).finally(() => {
        uni.hideLoading()
      })
    }
  },
  methods: {
    onSearch() {
      console.log('----')
      this.listShow = this.list.filter(item => {
        return item.name.includes(this.keyword)
      })
    },
    getList() {
      this.$api.groupList().then(res => {
        this.list = res.map(item => {
          return {
            ...item,
            count: item.voteList.length
          }
        })
        // 排序从大到小
        this.list.sort((a, b) => {
          return b.count - a.count
        })
        this.list = this.list.map((item, index) => {
          return {
            ...item,
            rank: index + 1
          }
        })
        this.onSearch()
      })
    },
    viewImage(item) {
      uni.previewImage({
        urls: [item.image]
      })
    },
    vote(item) {
      if (!this.userInfo) {
        this.loginPopup = true
        return
      }
      uni.showLoading({
        title: '加载中',
        mask: true,
        duration: 10000
      })
      this.$api.createVote({
        user_id: this.userInfo.id,
        group_id: item.id
      }).then(res => {
        uni.showToast({
          title: '投票成功',
        })
        this.getList()
      }).finally(() => {
        uni.hideLoading()
      })
    },
    submit() {
      if (!this.form.nickname) {
        uni.showToast({
          title: '请输入姓名',
          icon: 'none'
        })
        return
      }
      if (!this.form.phone) {
        uni.showToast({
          title: '请输入手机号',
          icon: 'none'
        })
        return
      }
      if (!/^1[3456789]\d{9}$/.test(this.form.phone)) {
        uni.showToast({
          title: '请填写正确的手机号',
          icon: 'none'
        })
        return
      }
      uni.showLoading({
        title: '加载中',
        mask: true,
        duration: 10000
      })
      this.$api.login({
        nickname: this.form.nickname,
        phone: this.form.phone
      }).then(res => {
        uni.showToast({
          title: '登录成功',
          icon: 'success'
        })
        this.userInfo = res
        uni.setStorageSync('userInfo', res)
        this.loginPopup = false
      }).finally(() => {
        uni.hideLoading()
      })
    },

  }
}
</script>

<template>
  <div class="vote">
    <div style="margin-bottom: 20rpx">
      <u-search v-model="keyword" @custom="onSearch" @search="onSearch"></u-search>
    </div>
    <div class="list">
      <div class="list-item-wrapper" v-for="item in listShow" :key="item.id">
        <div class="list-item">
          <image :src="item.url" class="list-icon" @click="viewImage(item)"></image>
          <div class="list-text">
            <div class="list-title">{{ item.title }}</div>
            <div style="display: flex;align-items: center;justify-content: center">
              <div class="list-desc">
                <span>第</span> <span style="color: red;padding:0 10rpx;text-align: center;font-size: 28rpx;font-weight: bold">{{ item.rank }}</span> 名
              </div>
              <div class="list-desc">
                <span style="color: #666666;padding:0 10rpx;text-align: center">{{ item.count }}</span> 票
              </div>
            </div>
          </div>

          <div class="vote-button">
            <div class="vote-button-right" @click="vote(item)">投票</div>
          </div>
        </div>
      </div>
      <u-empty v-if="listShow.length === 0" />
    </div>

    <u-popup length="90%" v-model="loginPopup" mode="center" border-radius="14">
      <div class="popup-box">
        <u-form style="width: 80%" :model="form" ref="uForm" label-width="120rpx">
          <u-form-item label="姓名"><u-input v-model="form.nickname" /></u-form-item>
          <u-form-item label="手机号"><u-input type="phone" v-model="form.phone" /></u-form-item>
        </u-form>
        <div class="tips">以上信息仅用于投票</div>
        <!-- 底部提交按钮 -->
        <div class="button" @click="submit">注册/登录</div>
      </div>
    </u-popup>

  </div>
</template>

<style lang="scss">
pages {
  height: 100%;
}
.button {
  width: 90%;
  margin: 0 auto;
  margin-top: 32rpx;
  background-color: rgba(51,109,244,1);
  color: #ffffff;
  border-radius: 8rpx;
  line-height: 80rpx;
  text-align: center;
  font-size: 32rpx;
}
.list {
  display: flex;
  flex-wrap: wrap;
}
.list-item-wrapper {
  width: 50%;
  padding: 20rpx 12rpx 0 12rpx;
}
.list-item {
  border-radius: 12rpx;
  background-color: #ffffff;
  box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.05);
  padding-bottom: 32rpx;
  overflow: hidden;
  .vote-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80%;
    margin: 12rpx auto 0;
    color: #ffffff;
    height: 40rpx;
    text-align: center;
    .vote-button-left {
      flex: 1;
      font-size: 28rpx;
      padding: 10rpx 0;
      background-color: rgba(94, 185, 94, 0.26);
      color: rgba(51,109,244,1);
      margin-right: -40rpx;
      border-bottom-left-radius: 20rpx;
      border-top-left-radius: 20rpx;
    }
    .vote-button-right {
      flex: 1;
      font-size: 28rpx;
      padding: 10rpx 0;
      background-color: rgba(51,109,244,1);
      border-radius: 12rpx;
    }
  }
  .list-icon {
    height: 220rpx;
    width: 100%;
  }
  .list-text {
    padding:0 20rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    .list-title {
      font-size: 28rpx;
      color: #000000;
      margin-bottom: 14rpx;
      text-align: center;
    }
    .list-desc {
      font-size: 24rpx;
      color: #999999;
      margin-bottom: 14rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
.vote {
  height: 100%;
  padding: 32rpx 24rpx;
  .title {
    font-size: 32rpx;
    color: #000000;
    line-height: 36rpx;
    margin-bottom: 40rpx;
    text-align: left;
    margin-top: 20rpx;
  }
}

.popup-box {
  padding: 30rpx 0;
  .tips {
    font-size: 24rpx;
    color: red;
    text-align: center;
    margin-bottom: 5rpx;
  }
}
pages {
  height: 100%;
}
.popup-box {
  padding: 30rpx 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .title {
    font-size: 32rpx;
    font-weight: bold;
    padding: 32rpx 0;
    text-align: center;
  }
  .exerc-bottom {
    width: 100%;
    margin-top: 20rpx;
  }
}
</style>
